<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象语法</title>
</head>
<body>
<div id="app"><!-- 绑定html的class -->
    <div class="static" v-bind:class="{active:isActive,'text-danger':hasError}">123</div>
    <div class="static" v-bind:class="classObejct">456</div>
    <div v-bind:style="styleObject">123</div>
    <div v-if="okStatus">Yes</div>
    <div v-else>No</div>
    <template v-if="okStatus"><!--可以当作不可见的包裹元素-->
        <h1>title</h1>
        <p>段落1</p>
        <p>段落2</p>
    </template>
    <div v-if="Math.random()>0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>
    <!--用 key 管理可复用的元素-->
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="输入用户名" key="user-input">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="输入邮箱">
    </template>
    <button v-on:click="toggleLoginType" key="email-input">切换</button>
</div>


<script type="text/javascript" src="source/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            isActive: true,
            hasError: false,
            classObejct: function () {
                return {
                    active: this.isActive && !this.hasError,
                    'text-danger': this.hasError && this.hasError.type === 'fatal'
                }
            },
            styleObject: {
                color: 'red',
                fontSize: '15px'
            },
            okStatus: true,
            loginType: "username"
        },
        methods: {
            toggleLoginType: function () {
                this.loginType = this.loginType === 'username' ? 'email' : 'username'
            }
        }
    })
</script>
</body>
</html>